<template>
    <!-- 合约统计 -->
    <section class="home-statistics">
        <p class="font-44 font-600 mb-62">合约统计</p>
        <main class="statistics-main">
            <div v-for="item in list" :key="item.id" class="main-box">
                <p class="box-title">{{ item.title }}</p>
                <div class="box-content">
                    <p class="mb-22 font-24 fontColor">24H总爆仓</p>
                    <p class="font-32 fontMarkColor font-600 mb-34">${{ fixDate(item.num,'') }}</p>
                    <div class="flex items-center justify-between mb-22">
                        <p class="font-26 fontColor">1H总爆仓</p>
                        <p class="font-26">${{ fixDate(item.a,'') }}</p>
                    </div>
                    <div class="flex items-center justify-between">
                        <p class="font-26 fontColor">4H总爆仓</p>
                        <p class="font-26">${{ fixDate(item.b,'') }}</p>
                    </div>
                    <div class="content-container flex items-center">
                        <div class="container-bar" :style="{ width: `${100 - item.c}%` }">{{ 100 - item.c }}%</div>
                        <div class="container-bar" :style="{ width: `${item.c}%` }">{{ item.c }}%</div>
                    </div>
                </div>  
            </div>
        </main>
    </section>
</template>

<script>
import { fixDate } from "@/utils/utis";
export default {
    data() {
        return {
            list: [
                {
                    id: 0,
                    title: 'BTC',
                    num:'65465654',
                    a: '20000000',
                    b: '532132132',
                    c: '50',
                },
                {
                    id: 1,
                    title: 'ETH',
                    num:'32168765',
                    a: '8100000',
                    b: '98754522',
                    c: '80',
                },
            ]
        }
    },
    methods: {
        fixDate,
    },
}
</script>

<style lang="scss" scoped>
.home-statistics {
    padding: 26px 20px 48px;
    background-color: #141416;
    border-radius: 18px;
    .statistics-main{
        display: flex;
        gap: 16px;
        .main-box{
            flex: 1;
            .box-title{
                font-size: 36px;
                font-weight: 600;
                margin-bottom: 12px;
            }
            &:nth-last-of-type(1){
                .box-title{
                    text-align: right;
                }
            }
            .box-content{
                height: 280px;
                background-color: #1C1C1E;
                border-radius: 10px;
                border: 1px solid #2A2A2D;
                padding: 28px 20px 24px 24px;
                display: flex;
                flex-direction: column;
                .fontColor{
                    color: #9D9D9E;
                }
                .fontMarkColor{
                    color: #0bc98d;
                }
                .content-container{
                    margin-top: auto;
                    .container-bar{
                        height: 34px;
                        font-size: 16px;
                        line-height: 34px;
                        padding: 0 4px;
                        font-weight: 700;
                        position: relative;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        overflow: hidden;
                        color: #fff;
                        box-sizing: border-box;
                        &:nth-of-type(1){
                            background-color: #4CA851;
                            text-align: left;
                            &::after{
                                content: "";
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 0;
                                height: 0;
                                z-index: 2;
                                border: 0 solid transparent;
                                border-left: 36px solid transparent;
                                border-right: 0 solid transparent;
                                border-bottom: 36px solid #1c1c1e;
                            }
                        }
                        &:nth-of-type(2){
                            background-color: #CA3F64;
                            text-align: right;
                            &::before{
                                content: "";
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 0;
                                height: 0;
                                z-index: 2;
                                border: 0 solid transparent;
                                border-right: 36px solid transparent;
                                border-left: 0 solid transparent;
                                border-top: 36px solid #1c1c1e;
                            }
                        }
                    }
                }
            }
        }
    }
}

</style>